import React,{useCallback} from 'react'
import Navbar from '@/components/Navbar/Navbar'
import left from '@/assets/images/left.png'
import {useHistory} from 'react-router-dom'
import {PhoneWrapper} from './styledMy'
import axios from 'axios'
import { Toast} from 'antd-mobile';
import '../../../utils/utils'
export default function Phone() {
    const history =useHistory()
    const handleClick=useCallback(
        ()=>{
            history.goBack()
        }
    )
    const handlelogin=useCallback(
        (e)=>{
            e.preventDefault();
            const phone=document.querySelector('#phone').value
            const pwd=document.querySelector('#pwd').value
           axios.get('user.json')
           .then((res)=>{
               if(res.data.data[0].username===phone && pwd===pwd){
                successToast(res)
                history.push('/home')
               }else{
                failToast()
               }
           })
          
        }
    )

    const  successToast=useCallback(
        (res)=>{
            Toast.success('login success !!!', 1);
            cookie("username",res.data.data[0].username)
        }
    ) 
    const  failToast=useCallback(
        ()=>{
            Toast.fail('login faild !!!,账号或密码错误', 1);
        }
    ) 
    return (
        <PhoneWrapper>
            <Navbar
            title='登录'
            icon={left}
            color='#F8F8F8'
            onClick={handleClick}
            >
            </Navbar> 
            <div className='aaa'>
                <div className='login'>
                  <form action="" id='from'>
                    <div><span>+86</span><input type="text" placeholder='输入手机号' id='phone' name='username'/></div>
                    <div><span>密码</span><input type="text" placeholder='输入验证码' name='password' id='pwd'/></div>
                    <p><button
                    onClick={handlelogin}
                    >登录</button></p>
                  </form>
                </div>
                <div className='msg'>
                    <p>没有账号？验证后自动注册</p>
                    <p>登录或注册表示同意《用户协议》</p>
                </div>
            </div>
   
        </PhoneWrapper>
    )
}
